<template>
  <div>
    <!-- 
      SpuList 不禁用
      其他禁用
     -->
    <CategorySelector :disabled="isShow !== 1" />
    <!-- 三个组件切换显示，有且只有一个能渲染 -->
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" />
    <AddOrUpdateSpu v-else-if="isShow === 2" @setIsShow="setIsShow" />
    <AddSku v-else @setIsShow="setIsShow" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XSpu",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import SpuList from "./components/spu-list.vue";
import AddOrUpdateSpu from "./components/add-or-update-spu.vue";
import AddSku from "./components/add-sku.vue";

/*
  1 SpuList
  2 AddOrUpdateSpu
  3 AddSku
*/
const isShow = ref(1);

const setIsShow = (val: number) => {
  isShow.value = val;
};
</script>

<style scoped></style>
